<script lang="ts">
	import { chatType, onlyGenerateImage } from '$lib/stores';
	export let submitPrompt: Function;
	export let suggestionPrompts = [];
	import Icon1 from './Icon1.png';
	import Icon2 from './Icon2.png';
	import Icon3 from './Icon3.png';
	import Icon4 from './Icon4.png';
	import textToPictureIcon from './suggestion-text-to-picture.svg';
	import pictureToTextIcon from './suggestion-picture-to-text.svg';
	import sound from './sound.png';
	import ragicon1 from './ragicon1.svg';
	import ragicon2 from './ragicon2.svg';
	import texticon1 from './texticon1.svg';
	import texticon2 from './texticon2.svg';
	import texticon3 from './texticon3.svg';
	import texticon4 from './texticon4.svg';
	import texticon5 from './texticon5.svg';
	import texticon6 from './texticon6.svg';

	export let prompt = '';

	// let prompts = [];

	// $: prompts =
	// 	suggestionPrompts.length <= 4
	// 		? suggestionPrompts
	// 		: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);

	const defaultSlectActionId = 'picture-image-to-text';
	let selectActionId = defaultSlectActionId;
	chatType.subscribe(() => {
		selectActionId = defaultSlectActionId;
		onlyGenerateImage.set(false);
	});
	$: if (selectActionId === 'picture-text-to-image') {
		onlyGenerateImage.set(true);
	} else {
		onlyGenerateImage.set(false);
	}

	function setPrompt(value: string) {
		prompt = value;
		const chatInput = document.getElementById('chat-textarea') as HTMLTextAreaElement;
		setTimeout(() => {
			if (chatInput) {
				chatInput.selectionStart = chatInput.value.length;
				chatInput.focus();
				if (chatInput.scrollHeight > chatInput.clientHeight) {
					chatInput.scrollTop = chatInput.scrollHeight;
				}
			}
		});
	}

	$: prompts = (() => {
		switch ($chatType) {
			case 'text':
				return [
					{
						title: ['全文续写', '依据原文内容，续写文字'],
						icon: texticon1,
						// content: '',
						onClick: function () {
							setPrompt(
								'请根据原文内容，续写文字，要求上下文衔接自然，且符合全文主旨，原文内容如下：\n'
							);
						}
					},
					{
						title: ['超级仿写', '模仿范文，一键生成佳作'],
						icon: texticon2,
						// content: '',
						onClick: function () {
							setPrompt(
								'请模仿范文的语气和风格，生成一篇类似的文章，如果用户没有提供待仿写的主题和风格，请随机挑选与原文不同的主题或风格，\n主题和风格如下：\n\n范文如下：\n'
							);
						}
					},
					{
						title: ['生成表格', '输入要求，自动制表'],
						icon: texticon3,
						// content: '',
						onClick: function () {
							setPrompt(
								'请根据用户的要求，将用户的数据制作成表格，如果用户没有提供数据，请你自己生成示例数据并填充进表格内。用户的要求如下：\n'
							);
						}
					},
					{
						title: ['全文摘要', '核心观点一键提取'],
						icon: texticon4,
						// content: '',
						onClick: function () {
							setPrompt(
								'请根据全文内容，提取文章的核心观点以及主旨，要求简明、清晰、完整。全文如下：\n'
							);
						}
					},
					{
						title: ['全文生成', '一键快速生成内容'],
						icon: texticon4,
						// content: '',
						onClick: function () {
							setPrompt(
								'请根据用户提供的主题和要求以及相关材料，为用户撰写一篇结构清晰、语句通顺、逻辑连贯的文章，用户提供的内容如下：\n'
							);
						}
					},
					{
						title: ['全文润色', '快速润色，风格一键改写'],
						icon: texticon6,
						// content: '',
						onClick: function () {
							setPrompt('请为以下内容润色，使语言表达流畅自然，语句逻辑通畅严谨。内容如下：\n');
						}
					}
				];
			case 'rag':
				return [
					{
						title: ['智能理解问答', '快速理解文档核心要点，根据提问为你总结文档内容'],
						icon: ragicon1,
						content: ''
					},
					{
						title: ['多种格式支持', '支持PDF/DOC/EXCEL 等基本文档格式上传'],
						icon: ragicon2,
						content: ''
					}
				];
			case 'picture':
				return [
					{
						id: 'picture-text-to-image',
						title: ['文本生成图片', '输入文字描述，大模型为你生成图片'],
						icon: textToPictureIcon,
						// content: '',
						onClick: function () {
							selectActionId = this.id;
						}
					},
					{
						id: 'picture-image-to-text',
						title: ['图片识别', '上传图片和问题，大模型为你解析'],
						icon: pictureToTextIcon,
						// content: '',
						onClick: function () {
							selectActionId = this.id;
						}
					}
				];
			case 'speech':
				return [];
			case 'normal':
			default:
				return [
					{
						icon: Icon1,
						title: ['游戏娱乐', '创造新颖有趣的游戏玩法'],
						onClick: function () {
							setPrompt(
								'请为年轻人提供一些新颖、简单又有趣的小游戏。 要求：简洁易懂，不需要特殊的设备或复杂的规则，可以在日常生活中轻松实现的 示例："我有你没有"：每人轮流说一件只有自己做过，别人都没有做过的事情，如果这件事情在场有人做过减一分，分数先减完者接受惩罚 请你提供更多这样的游戏，并详细描述游戏的规则和玩法·\n'
							);
						}
					},
					{
						icon: Icon2,
						title: ['旅游指南', '提供丰富全面的旅游攻略'],
						onClick: function () {
							setPrompt(
								'你是一名旅游专栏专家，请撰写一篇详细的旅游指南：\n目的城市：上海\n写作要求：包含旅游景点、当地风俗、美食推荐、住宿建议和注意事项\n'
							);
						}
					},
					{
						icon: Icon3,
						title: ['学习辅助', '自主定制学习内容'],
						onClick: function () {
							setPrompt(
								'你是一个想提高英语口语的学习者，请根据以下要求与AI进行对话练习： \n场景设定：在咖啡厅与外国朋友聊天\n主题讨论：谈论最近的旅行经历 \n特别要求：使用过去时态，尽量丰富词汇\n'
							);
						}
					},
					{
						icon: Icon4,
						title: ['代码助手', '快速编写代码脚本'],
						onClick: function () {
							setPrompt(
								'你是一名数据工程师，准备为新闻网站编写一个爬虫脚本：\n核心功能：获取文章标题、文章链接、发布时间\n脚本细节：使用requests和BeautifulSoup库、设置代理、避免封IP\n'
							);
						}
					}
				];
		}
	})();
</script>

<div class="{$chatType === 'text' ? '' : 'px-[50px]'} pt-5 text-left w-full max-w-3xl m-auto">
	<div class=" flex flex-wrap text-left">
		{#if $chatType === 'speech'}
			<img src={sound} alt="" class="w-[340px] pb-14 object-cover m-auto" />
		{/if}
		{#each prompts as prompt, promptIdx (prompt.id || promptIdx)}
			<div
				class="{promptIdx > 1 ? 'hidden md:inline-flex' : ''} basis-full {$chatType === 'text'
					? 'sm:basis-1/3'
					: 'sm:basis-1/2'} px-[15px] py-[10px]"
			>
				<button
					class=" flex-1 flex w-full h-full p-[10px] bg-[#3E3F4A] {prompt.content || prompt.onClick
						? 'hover:bg-gray-800'
						: 'cursor-auto'} border {prompt.id && prompt.id === selectActionId
						? 'border-[#E95513] bg-[#66390E]'
						: 'border-transparent'} rounded-lg transition group drop-shadow-lg"
					on:click={() => {
						prompt.content && submitPrompt(prompt.content);
						prompt.onClick?.call(prompt);
					}}
				>
					<div class="self-center rounded-lg shrink-0">
						<img src={prompt.icon} class="w-[66px]" alt="icon" />
					</div>
					<div class="flex flex-col text-left self-center pl-[10px]">
						{#if prompt.title && prompt.title[0] !== ''}
							<div class="text-[16px] font-medium text-[#F7F7F7] line-clamp-1">
								{prompt.title[0]}
							</div>
							<div class="text-[13px] text-[#F7F7F7] line-clamp-2">{prompt.title[1]}</div>
						{:else}
							<div class=" self-center text-[13px] font-medium text-[#F7F7F7] line-clamp-2">
								{prompt.content}
							</div>
						{/if}
					</div>

					<!-- <div
						class="self-center p-1 rounded-lg text-gray-850 group-hover:text-gray-100 transition"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 16 16"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
								clip-rule="evenodd"
							/>
						</svg>
					</div> -->
				</button>
			</div>
		{/each}
	</div>
</div>
